<template>
  <view class="mine"  v-if="InSignUnitListData.length">
    <view class="info-card">
      <view class="user-info flex-ac">
        <button
          class="user-avatar"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <u-image
            :src="userInfo.avatar ? userInfo.avatar : '/static/avatar.png'"
            width="130rpx"
            height="130rpx"
          ></u-image>
        </button>
        <template v-if="isLogin" >
          <view class="user-number" @click="$route('/pages/mine/my')">
            <!-- <view @click="editNameModal = true">{{ userInfo.nickName }}</view> -->
			<view>{{ userInfo.userName || ''}}</view>
            <view>{{ userInfo.phonenumber }}</view>
          </view>
        </template>
        <template v-else>
          <view class="user-number">
            <view @click="$route('/pages/login/index')">登录</view>
          </view>
        </template>
      </view>
      
    </view>
    <!-- <view class="tabs flex-ja">
      <view @click="nav('/pages/deliver/index')">
        <u--image
          src="/static/icon/icon_send.png"
          width="80rpx"
          height="80rpx"
        ></u--image>
        <view class="tab-title">我的投递</view>
      </view>
    </view> -->

    <view class="cell">
      <view
        class="cell-item l-border-bottom"
        @click="nav('/pages/information/index')"
      >
        <view class="flex-ac">
          <u--image
            src="/static/icon/icon_order.png"
            width="38rpx"
            height="38rpx"
          ></u--image>
          <view class="cell-item_title">签约信息</view>
        </view>
        <u-icon name="arrow-right" color="#000" size="12"></u-icon>
      </view>
	  <view
	    class="cell-item l-border-bottom"
	    @click="nav('/pages/certigier/index')"
		v-if="!signDetailsData.parentId"
	  >
	    <view class="flex-ac" >
	      <u--image
	        src="/static/icon/icon_people.png"
	        width="38rpx"
	        height="38rpx"
	      ></u--image>
	      <view class="cell-item_title">授权人管理</view>
	    </view>
	    <u-icon name="arrow-right" color="#000" size="12"></u-icon>
	  </view>
	  <view
	    class="cell-item l-border-bottom"
	    @click="nav('/pages/order/index')"
	  >
	    <view class="flex-ac">
	      <u--image
	        src="/static/icon/icon_oil.png"
	        width="38rpx"
	        height="38rpx"
	      ></u--image>
	      <view class="cell-item_title">油脂收运记录</view>
	    </view>
	    <u-icon name="arrow-right" color="#000" size="12"></u-icon>
	  </view>

 
      <view class="cell-item" @click="nav('/pages/settings/index/index')">
        <view class="flex-ac">
          <u--image
            src="/static/icon/icon_set.png"
            width="38rpx"
            height="38rpx"
          ></u--image>
          <view class="cell-item_title">设置</view>
        </view>
        <u-icon name="arrow-right" color="#000" size="12"></u-icon>
      </view>
    </view>

    <u-modal
      :show="show"
      title="提示"
      confirmText="知道了"
      confirmColor="#138E57"
      @confirm="show = false"
    >
      <view class="slot-content">你还没登陆, 请先登陆 </view>
    </u-modal>
    <u-modal
      :show="editNameModal"
      title="请输入昵称"
      confirmText="确定"
      confirmColor="#138E57"
      @confirm="editName"
    >
      <view class="name-input flex-ac">
        <input
          type="nickname"
          v-model="nickName"
          class="weui-input"
          @blur="onNickName"
          placeholder="请输入昵称"
        />
      </view>
    </u-modal>
  </view>
  
  <view class="qinayue" v-else>
  	当前账号不是签约人，暂不开放
  </view>
</template>

<script>
	import config from "@/utils/config";
import { getToken } from "@/utils/auth";

import { signDetails,residentsAvatar,InSignUnitList} from "@/api";
export default {
  components: {
  },
  data() {
    return {
		contractStatus:'',
		InSignUnitListData:[],
		signDetailsData:[],
      show: false,
      avatarUrl: null,
      editNameModal: false,
      nickName: "",
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  onShow() {
    if (getToken()) {
      this.$store.dispatch("userInfo");
    }
	this.InSignUnitList()
  },
  methods: {
  // 签约信息
  InSignUnitList(){
	// <!-- contractStatus 0未签约1正常,3已过期 -->
	InSignUnitList().then(res => {
		this.InSignUnitListData = res.data
		if(res.data.length){
			this.signDetails(res.data[0].deptId)
		}
	})
  },
  // 签约信息
  signDetails(id) {
	  let deptId;
	  // console.log("uni.getStorageSync('deptId')",uni.getStorageSync('deptId'));
	  if(uni.getStorageSync('deptId')){
	  	deptId = uni.getStorageSync('deptId')
	  }else{
	  	deptId = id
		uni.setStorageSync('deptId',deptId);
	  }
  	signDetails({
  		deptId:deptId
  	}).then(res => {
  		this.signDetailsData = res.data
  	})
  },
    nav(path, params = null) {
      // if (!this.isLogin) {
      //   this.show = true;
      //   return;
      // }
      this.$route({
        url: path,
        params,
      });
    },
    onChooseAvatar(res) {
      console.log(res);
      // this.avatarUrl = res.detail.avatarUrl;
	  uni.uploadFile({
	    url: `${config.APP_BASE_URL}/business/residents/avatar`, 
	    filePath: res.detail.avatarUrl,
	    name: "avatarfile",
	    formData: {},
	    header: {
	      Authorization: "Bearer " + getToken(),
	    },
	    success: (res) => {
			this.$store.dispatch("userInfo");
	      // resolve(JSON.parse(res.data).url);
	    },
	  });
    },	
    editName() {
      console.log(this.nickName);
      this.editNameModal = false;
    },
    onNickName(e) {
      this.nickName = e.detail.value;
    },
  },
};
</script>

<style lang="less" scoped>
.qinayue{
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mine {
  padding: 30rpx;
  .name-input {
    width: 544rpx;
    height: 80rpx;
    background: #f7f7f7;
    border-radius: 12rpx;
    padding: 0 20rpx;
  }
  .slot-content {
    font-size: 34rpx;
    color: #858585;
    padding: 20rpx 0;
  }
  .cell {
    margin: 30rpx 0;
    padding: 0 30rpx;
    border-radius: 10rpx;
    background: #ffffff;
  }
  .cell-item {
    display: flex;
    justify-content: space-between;
    padding: 38rpx 14rpx;
  }
  .cell-item_title {
    font-size: 30rpx;
    color: #000000;
    margin-left: 38rpx;
  }
  .tabs {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 12rpx;
    padding: 30rpx 0 20rpx 0;
    margin: 30rpx 0;
    .tab-title {
      font-size: 24rpx;
      color: #666668;
      margin-top: 10rpx;
    }
  }
  .info-card {
    background: linear-gradient(101deg, #47b352 1%, #47b352 29%, #1f9970 100%);
    border-radius: 15rpx;
  }
  .user-info {
    padding: 56rpx 0 40rpx 40rpx;
    .user-avatar {
      width: 130rpx;
      height: 130rpx;
      border-radius: 100%;
      padding: 0;
      margin: 0;
    }
    .user-number {
      margin-left: 30rpx;
      color: #ffffff;
      view:nth-child(1) {
        font-size: 40rpx;
        padding-bottom: 8rpx;
      }
      view:nth-child(2) {
        font-size: 28rpx;
      }
    }
  }
  .user-integral {
    padding: 20rpx 30rpx 20rpx 40rpx;
    background: rgba(0, 0, 0, 0.08);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
    color: #ffffff;
    .integral-num {
      :nth-child(2) {
        font-size: 28rpx;
        margin-left: 14rpx;
      }
      :nth-child(3) {
        font-size: 40rpx;
      }
    }
    .integral-detail {
      font-size: 24rpx;
    }
  }
}
</style>
